<template>
  <div class="case" style="height:100%">
    <el-row :gutter="20" style="margin:0;height:100%;">
      <el-col style="border:1px solid #039C82;margin:0;padding:0;height:1050px;" :span="16">
        <!-- title -->
        <div class="title">
          <div class="header-left">
            <span class="head">您的当前位置 :</span>
            <el-page-header style="font-size:20px;line-height: 50px;">
              <template #title>
                <span class="page" @click="back">首页</span>
              </template>
              <template #content>
                <span class="bing">病例展示</span>
              </template>
            </el-page-header>
          </div>
          <span class="header-right">更多</span>
        </div>
        <!-- content -->
        <div class="content" style="height:95%">
          <el-container style="height:100%">
            <el-header style="height:750px;text-align: center;">
              <ul>
                <li>
                  <div class="li-top">
                    <a href>早期轻型糖尿病成功治愈案例</a>
                    <i>点击量：5</i>
                  </div>
                  <p class="li-p">
                    作为一个已经与糖尿病病友打交道近30年的内分泌专科大夫，我经常告诫我的病友，糖尿病是终身性疾病，需要长期的血糖监测和服用药物。但最近的两个病例告诉我，糖尿病是可以逆转的，确诊后的糖尿病患者在坚持健康的生活方式后可以使糖尿病消失。
                    <a href>【阅读全文】</a>
                  </p>
                </li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </el-header>
            <el-main>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage3"
                  :page-size="100"
                  layout="prev, pager, next, jumper"
                  :total="1000"
                ></el-pagination>
            </el-main>
          </el-container>
        </div>
      </el-col>
      <el-col :span="8" style="padding:0;margin:0;height:900px;">
        <div class="col-right">
          <ul>
            <li>
              <div class="top">
                <span>医院简介</span>
                <span>更多</span>
              </div>
              <img style="width:100%;height:100px;" src="@/assets/imgs/1.jpg" alt="医院简介" />
              <p
                style="text-indent: 32px;"
              >山西大医院占地面积11万平方米，医疗区建筑面积13万平方米。设有58个临床医技科室，拥有职工2600余人，其中高级职称217人。拥有目前国际最先进的3.0 GE磁共振2台，GE大宝石CT 2台，国内首台730 DSA，以及伽玛刀、PET-CT、VCT、直线加速器等，仪器设备装备达到国内一流水平</p>
            </li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 回首页
    back() {
      this.$router.push({
        name: "main"
      });
    }
  }
};
</script>

<style scoped>
.el-pagination{
    width: 550px;
    margin: 30px auto;
}
.li-top {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
  color: #039c82;
  background-color: #eff3ec;
}
.li-p {
  text-indent: 32px;
  color: black;
  line-height: 32px;
  text-align: left;
}
.li-p a {
  color: brown;
  text-decoration: none;
}
i {
  font-style: normal;
}
.li-top a {
  text-decoration: none;
  color: #039c82;
}
.el-header ul li {
  list-style: none;
  height: 180px;
  margin: 0;
  box-sizing: border-box;
  padding: 20px;
  /* background-color: aqua; */
  border-top: 1px dashed gray;
}
.el-header ul li:last-child{
    border-bottom: 1px dashed gray;
}
.el-header ul {
  margin-top: 20px;
  padding: 0;
}
.case {
  width: 1200px;
  height: 1000px;
  margin: 0 auto;
  /* background-color: ; */
}
.header-left {
  display: flex;
  margin: 0 20px;
}
.header-right {
  margin: 0 20px;
  cursor: pointer;
}
.title {
  display: flex;
  justify-content: space-between;
  height: 50px;
  background-color: #039c82;
  color: #fff;
  font-size: 18px;
  line-height: 50px;
}
.bing,
.page,
head {
  font-size: 18px;
  color: #fff;
}
.col-right ul li {
  /* margin:0; */
  margin-bottom: 30px;
  list-style: none;
  border: 1px solid #039c82;
  height: 430px;
}
.col-right ul li:first-child {
  height: 300px;
}
.col-right ul {
  margin: 0;
}
.top {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  color: #fff;
  background-color: #039c82;
}
.top span {
  margin: 0 20px;
}
.el-footer a {
  display: block;
  text-decoration: none;
  color: #039c82;
  margin-bottom: 10px;
}
</style>